<template>
    <v-container>
        <v-layout justify-space-around>
            <v-flex xl5 mr-2>
                <v-textarea hint="行数据" placeholder="行数据" auto-grow clearable rows="10" solo v-model.trim="rows"></v-textarea>
            </v-flex>
            <v-flex xl5 ml-2>
                <v-textarea hint="列数据" placeholder="列数据" auto-grow clearable rows="10" solo v-model.trim="cols"></v-textarea>
            </v-flex>
        </v-layout>
        <v-layout justify-space-around>
            <v-flex xl5 mr-2>
                <v-card>
                    <v-card-title>拼接字符</v-card-title>
                    <v-card-text>
                        <v-radio-group row v-model="concatSymbol">
                            <v-radio v-for="item of radios">
                                <template v-slot:label>
                                    <span class="font-weight-bold primary--text" :value="item">{{item}}</span>
                                </template>
                            </v-radio>
                        </v-radio-group>
<!--                        <v-radio-group row v-model="concatSymbol">-->
<!--                            <v-radio v-for="(item,index) of radios" :label="item" :value="index === 3 ? '' : item"></v-radio>-->
<!--                        </v-radio-group>-->
                        <v-text-field label="其他自定义字符请手动输入"></v-text-field>
                    </v-card-text>
                </v-card>
            </v-flex>
            <v-flex xl5 ml-2>
                <v-card>
                    <v-card-title>操作</v-card-title>
                    <v-card-actions>
                        <v-btn @click="concat()">拼接</v-btn>
                        <copy-button :content="result"></copy-button>
                        <v-btn @click="empty()">清空行/列数据</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
        <div>
            {{concatSymbol}}
        </div>
    </v-container>
</template>

<script>
    import CopyButton from '@/components/CopyButton'

    export default {
        name: "DataConcat",
        data() {
            return {
                radios: ['.', '-', ':', '无'],
                rows: '',
                cols: '',
                result: '',
                concatSymbol: '' // v-radio的v-model绑定有问题，变量暂时留着
            }
        },
        components: {
            CopyButton,
        },
        methods: {
            concat() {
                if (this.rows === '' || this.cols === '') {
                    alert('请输入行、列数据');
                }
                this.result = '';
                const symbol = this.concatSymbol === 3 ? '' : this.radios[this.concatSymbol];
                const rows1 = this.rows.split('\n');
                const cols1 = this.cols.split('\n');
                for (let row of rows1) {
                    for (let col of cols1) {
                        this.result += row + symbol + col + '\n';
                    }
                }
            },
            empty() {
                this.rows = '';
                this.cols = '';
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    div{
        margin-top: 20px;
    }
</style>
